<template>
	<view class="mask" @click="cancel">
		<view class="edit-box" @click.stop>
			<view class="edit-list">
				<view v-for='(item,i) in btns.split(",")' :key='i' class="btn" @click="change(i)">{{item}}</view>
			</view>
			<view class="btn cancel" @click="cancel">取消</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['btns'], // 按钮文字，多个英文逗号隔开
		data() {
			return {
				
			};
		},
		methods:{
			cancel(){
				this.$emit('cancel')
			},
			change(type){
				this.$emit('change',type)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes bottom {
		0% {bottom: -386rpx;}
		100% {bottom: 0;}
	}
	.edit-box{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30rpx;
		animation: bottom .2s ease-in-out forwards;
		.btn{
			text-align: center;
			background-color: #FFFFFF;
			line-height: 92rpx;
			font-size: 28rpx;
			color: #333;
		}
		.cancel{
			margin-top: 30rpx;
			border-radius: 12rpx;
			color: #999999;
		}
		.edit-list{
			border-radius: 12rpx;
			overflow: hidden;
			.btn{
				border-bottom: 1px solid #F2F2F2;
				&:nth-last-child(1){
					border-bottom: none;
				}
			}
		}
	}
</style>
